import React from 'react'
import { useNavigate } from 'react-router-dom';
import { TabBar } from 'antd-mobile';
import { Outlet } from 'react-router-dom';
import {
    AppOutline, UserOutline,
} from 'antd-mobile-icons';
import "./All.css"

export default function All() {

    const navigate = useNavigate()

    const tabs = [
        {
            key: '/all/home',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/all/personal',
            title: '个人中心',
            icon: <UserOutline />,
        },
    ];

    return (
        <div className='all'>
            <Outlet></Outlet>
            <TabBar className='tabbar' onChange={(e) => navigate(e)}>
                {tabs.map(item => (<TabBar.Item key={item.key} icon={item.icon} title={item.title} />))}
            </TabBar>
        </div >
    )
}
